<template>
  <div class="zsh-form-item">
    <input class="zsh-input" :type="type" v-model="inputValue"></input>
    <span :class="[inputValue && inputValue.trim() ? 'zsh-placeholder-always' : 'zsh-placeholder']">{{placeholder}}</span>
    <div class="error">{{error}}</div>
  </div>
</template>

<script>
export default {
  name: "zsh-input",
  props:{
    input :{
      type:String
    },
    error: {
      type:String
    },
    placeholder: {
      type:String
    },
    type:{
      type:String,
      default:'text'
    }
  },
  data(){
    return {
      inputValue: this.input
    }
  },
  model: {
    prop: 'input',
    event: 'change'
  },
  watch:{
    //监听值变化，再赋值给modelVal
    inputValue(value){
      this.$emit('change',value);
    }
  }
}
</script>

<style scoped lang="less">
.error {
  text-align: left;
  color: orangered;
  font-size: 12px;
  padding-top: 10px;
}

.zsh-form-item {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.zsh-input {
  background: transparent;
  border: 1px solid rgba(0,0,0,.8);
  padding: 5px 10px;
  outline: 0;
  box-shadow: none;
  z-index: 9;
  font-size: 16px;
  height: 50px;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  width: 100%;

  & + .zsh-placeholder{
    position: absolute;
    top:  15px;
    left: 8px;
    color: #888888;
    font-size: 14px;
  }

  & + .zsh-placeholder-always{
    position: absolute;
    top: -20px;
    left: 0;
    color: #0091FF;
    font-size: 12px;
  }

  &:focus {
    border-color: #0091FF;
    + .zsh-placeholder {
      top: -20px;
      left: 0;
      color: #0091FF;
      font-size: 12px;
    }
  }
}
</style>
